<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">

   <body>
      <ui:composition template="/templates/template.xhtml">
         
         <ui:define name="title">RichFaces Simple Own Tree Sample</ui:define>

         <ui:define name="head">
            <style>
               .wh_panel {
                  padding:0;
                  width:100%;
               }
               .wh_panel_header {
                  padding: 3px 0 3px 6px;
               }
               .wh_panel_body {
                  height: 250px;
                  overflow: auto;   /* activate automatic scrolling of body content */
                  padding:0;        /* deactivate padding in panel body */
               }
               /* top and left padding of the tree in the panel body */
               .rf-tr {
                  padding: 3px 0 0 5px;
               }
               /* make the tree line visible in order to trigger the scrolling mechanism activated in the panel body */
               .rf-trn {
                  overflow: visible;
               }
            </style>
         </ui:define>

         <ui:define name="body">

            <h:form id="form" prependId="false">
               <div style="width:15%; float:left; ">
                  <div style="padding-right: 2px; border-right: 1px solid; ">
                     <div style="width:100%;">
                        <rich:panel id="panel1" header="Tree Panel" 
                                    styleClass="wh_panel" headerClass="wh_panel_header" bodyClass="wh_panel_body">
                           <rich:tree id="tree1" value="#{stations.rootNodes}" var="station">
                              <rich:treeNode>
                                 <h:outputText value="#{station.name}" />
                              </rich:treeNode>
                           </rich:tree>
                        </rich:panel>
                     </div>
                  </div>
               </div>
               <div style="width:85%; float:left;">
                  <div style="width:100%;">
                     <rich:panel id="panel2" header="Tree Panel" styleClass="wh_panel" headerClass="wh_panel_header" bodyClass="wh_panel_body">
                        <rich:tree id="tree2" value="#{stations.rootNodes}" var="station">
                           <rich:treeNode>
                              <h:outputText value="#{station.name}" />
                           </rich:treeNode>
                        </rich:tree>
                     </rich:panel>
                  </div>
               </div>
            </h:form>

         </ui:define>
      </ui:composition>
   </body>
</html>